import React, { Component } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Form, Input, Button, message } from 'antd';
import BraftEditor from 'braft-editor';
import NoticeService from './services';
import { bfUploadFn } from '@/utils/utils';
const { TextArea } = Input;
@Form.create({})
export default class Notice extends Component {
  state = {
    detail: null,
    title: undefined,
  };
  componentDidMount() {
    NoticeService.selectNotice({}).then(res => {
      this.setState({
        detail: res.detail,
        title: res.title,
      });
    });
  }
  handleOk = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        NoticeService.updateNotice({ title: values.title, detail: values.detail.toHTML() }).then(
          res => {
            if (res) {
              message.success('修改成功～');
              NoticeService.selectNotice({}).then(res => {
                this.setState({
                  detail: res.detail,
                  title: res.title,
                });
              });
            }
          },
        );
      }
    });
  };
  render() {
    const largeFormItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
    };
    const checkDetail = (_, value, callback) => {
      if (value.toHTML() === '<p></p>') {
        callback('请输入弹窗内容');
        return;
      }
      callback();
    };
    const {
      form: { getFieldDecorator },
    } = this.props;
    return (
      <PageHeaderWrapper>
        <Card bordered={false}>
          <Form>
            <Form.Item {...largeFormItemLayout} required label="滚动条内容">
              {getFieldDecorator('title', {
                initialValue: this.state.title,
                rules: [{ required: true, message: '请输入滚动条内容' }],
              })(<TextArea rows={4} placeholder="请输入滚动条内容" />)}
            </Form.Item>
            <Form.Item {...largeFormItemLayout} required label="弹窗内容">
              {getFieldDecorator('detail', {
                initialValue: BraftEditor.createEditorState(this.state.detail),
                rules: [{ validator: checkDetail }],
              })(
                <BraftEditor
                  style={{ border: '1px solid #d1d1d1', borderRadius: 5, backgroundColor: '#fff' }}
                  contentStyle={{ height: 300, boxShadow: 'inset 0 1px 3px rgba(0,0,0,.1)' }}
                  excludeControls={['emoji', 'clear', 'blockquote', 'code']}
                  media={{ uploadFn: bfUploadFn }}
                />,
              )}
            </Form.Item>
          </Form>
          <div
            style={{
              textAlign: 'center',
            }}
          >
            <Button
              type="primary"
              onClick={this.handleOk}
              style={{
                width: 120,
                margin: '70px',
              }}
            >
              确定
            </Button>
          </div>
        </Card>
      </PageHeaderWrapper>
    );
  }
}
